<script setup lang="ts">
import type { IPage, IPageTable } from '@/type/interfaces';
const dataList = ref<Array<any>>(
    [
        { id: '0', name: 'name-0', publication: 'publication-0', bookName: 'book-name-0' },
        { id: '1', name: 'name-1', publication: 'publication-1', bookName: 'book-name-1' }
    ]
)
const tableConfig = ref<IPageTable>({
    tableProp:{
        actionWidth:'140px'
    },
    tableObj: {
        data: [dataList.value[0]],
        columnConfig: [
            { prop: 'id', name: 'level' }
            , { prop: 'name', name: '名词',width:600 }
            , { prop: 'publication', name: '出版' }
            , { prop: 'bookName', name: '签名' }
        ],
    }
})
const page = ref<IPage>(
    {
        total: 2,
        pageSize: 1,
        currentPage: 1,
        pageSizes: [1],
    }
)
const handleEdit = (index: number, row: any) => {
    console.log('handleEdit', index, row);
}
const handleDelete = (index: number, row: any) => {
    console.log('handleDelete', index, row);
}
const pageChange = (page: IPage) => {
    if (page.currentPage === 1) {
        tableConfig.value.tableObj.data = [dataList.value[0]]
    }
    if (page.currentPage === 2) {
        tableConfig.value.tableObj.data = [dataList.value[1]]
    }
}
</script>
<template>
    <div class="page-table-1-container">
        <page-table :table-config="tableConfig" :page="page" @page-change="pageChange">
            <template #rowAction="{ index, row }">
                <div class="w-200px">
                    <el-button size="small" @click="handleEdit(index, row)">编辑</el-button>
                    <el-button size="small" type="danger" @click="handleDelete(index, row)">删除</el-button>
                </div>
            </template>
        </page-table>
        <narration>
            <ul>
                <li>nothing...</li>
            </ul>
        </narration>
    </div>
</template>